<template>
	<view style="display: flex;">
		<view v-for="(item,index) in files.values()" :key="index" style="width: 50px;height: 50px; position: relative;margin-right: 10px;">
			<uni-icons type="clear" size="20" @click="clear(item.name)" style="z-index: 2; position: absolute;right: -10px;top: -10px;"></uni-icons>
			<image style="width: 50px;height: 50px;object-fit: cover;" :src="item.path" mode="widthFix"></image>
		</view>
		<lsj-upload
		ref="lsjUpload2"
		childId="upload2"
		width="50px"
		height="50px"
		:option="option"
		formats="png,jpg,pdf"
		:count= "count"
		@change="onChange"
		@uploadEnd="onuploadEnd"
		>
			<view class="img-btn">
				<uni-icons type="camera-filled" size="24" color="#999"></uni-icons>
			</view>
		</lsj-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传接口参数
				option: {
					// 上传服务器地址，此地址需要替换为你的接口地址
					url: 'http://hl.j56.com/dropbox/document/upload',
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// 示例参数可删除
						'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsI',
						'uid': '27682',
						'client': 'app',
						'accountid': 'DP',
					},
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
					}
				},
				// 文件回显列表
				files: new Map(),
				count: 4
			}
		},
		methods: {
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name,item);
				// 演示上传完成后取服务端数据
				if (item['responseText']) {
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				// 强制更新视图
				this.$forceUpdate();
			},
			// 文件选择回调
			onChange(files) {
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				// 演示重新定位组件
				this.$nextTick(()=>{
					this.$refs.lsjUpload2.show();
				});
			},
			// 移除某个文件
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs['lsjUpload2'].clear(name);
			}
		},
		// props: {
		// 	limit: Number
		// }
	}
</script>

<style lang="less" scoped>
	.img-btn {
		width: 48px;
		height: 48px;
		border: 1px solid #999;
		border-radius: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>